开源｜Magpie：组件库详解

开源项目专题系列（八）
1.开源项目名称：magpie_fly2.github地址：

https://github.com/wuba/magpie_fly

3.简介：magpie_fly 是58集体出品组件库，统一管理日常开发中的基础组件及高阶组件，并提供了相对友好的方式介绍组件的具体使用方式。旨在降低日常开发中对组件的查找和学习成本，实现技术组件的统一，提升开发效率。

全文大纲如下：

• 背景
• 简介
• 整体效果展示
• 特点与优势
• 实现方式
• 现有组件list
• 后期规划

• 作者介绍

背景

相信很多公司都已经在研究flutter，甚至已经把flutter运用到了自己的项目中，它的流畅性，热加载以及其丰富，高效的UI表现力相信很多人都有体会。
在开始magpie项目之前，为了更多的了解flutter，我们首先用安居客的有料界面做了尝试，但是在开发有料界面的时候，我们遇到了一些问题：

从上面的图中可以看出，我们在现实开发中难免会遇到以下的问题：

1. flutter提供的组件不满足我们的开发需求，我们需要自己封装或者使用第三方组件满足我们的开发需求。

2. 在不同平台上搜到很多相似组件的不同实现方式，难以抉择。

3. 需要本地运行才能看见组件的真正样式，因为作者介绍的效果图跟实际效果可能有偏差。

4. 需要把demo down下来之后，才能找到组件效果实现的具体代码。

5. 没有符合我们集团内部统一风格的整套UI样式。

6. 写UI的同学重复造轮子。比如一个button的创建，一个imageView的使用。

magpie_fly要做什么：

1. 我们希望统一组件管理，以最友好的方式去介绍组件，降低组件的查找和学习成本。所以我们需要一个组件库，当然这个组件库是开放的，我们希望更多的开发者将自己的组件贡献到组件库中。

2. 同一个集团下就应该要考虑体验一致性的问题，所以我们希望像material-ui和fusion.design一样，用flutter实现一整套统一UI风格的组件。

3. 聚集现有最优的高阶组件。

4. 我们希望通过设计图就能生成出对应的UI代码，这样不但能解决UI图跟实际开发效果不一致性的问题，同时能降低设计与开发的沟通成本，解放了开发同学重复写UI代码的担子。

目前我们只做了第一点，剩下三个方面将是我们组件库后期开发的重点。

整体效果展示

• 58公众号：动态显示58最新技术文章，方便向外界宣传58技术

• widget：库中管理的所有组件列表，便于开发者进行查找

• 组件详情：组件介绍界面，markdown+效果+代码的显示方式

• 使用文档：详细的描述了用源码的方式跑magpie_fly App的具体方法

• 贡献流程：详细的描述了我们应该怎么样去把自己写好的组件接入到组件库中
  

特点与优势

1、特点

•   集合所有日常开发中常用组件，统一管理
•   文档、组件效果和代码同时显示
•   支持快速接入新的widget

2、优势

与Flutter-Go对比

实现方式

1、组件详情页

 1.1 方案选择

• 文档+图片

通常情况下，都会想到用文本的方式去介绍一个组件的使用方式，如果想要显示组件的样式，基本都是通过嵌入图片或者gif的方式去显示一个组件的具体效果，这样做的弊端是，如果我修改了组件的样式，就算只改了一点点，我们都需要重新截图或者录gif动图。很显然这是很麻烦的。

• 专门用widget实现一个完整的详情页

开发者针对不同的组件自己去用widget实现一套自己的组件详情页，但是我们这是一个组件库，就希望统一详情页样式和风格，所以让开发者自己实现自己的详情页是不可取的，并且开发者自己全部开发一个详情页，其实消耗的精力也是比较大的。

• 文档+组件效果+代码

我们希望在给开发者介绍组件的同时，开发者能对组件进行操作，增加开发者对组件的理解，并且能直接看见实现该组件效果的对应代码，方便开发者学习的同时，还能一键复制到自己的工程中直接使用。这样大大降低了开发者的学习成本，从而提高开发效率。于是我们借鉴了material-ui的思想，实现了一套markdown + widget效果(可以交互) + 代码的方案。

1.2 方案文档+组件效果+代码显示实现方式

我们先来看下效果：

可以看出，我们中间嵌入的组件是可以手动进行操作的，而该组件是由下面的代码渲染出来的。那我们是怎么样实现这样的效果的呢？

虽然详情页看起来是由三部分组成，实际上开发者只需要编写markdown文档，并且在文档中添加我们规定的代码，我们通过解析特定markdown文档的方式得到这样的效果。

我们来看下需要嵌入组件的markdown的格式：

框出来的地方，就是我们需要在.md中对应位置嵌入组件时的固定嵌入代码。我们会在解析markdown的时候，专门对嵌入的代码进行处理。

参数详解：

demo：需要引入的样式的代码路径
code：默认true，是否要展示widget对应的代码
jump：默认false，在当前页面展示效果+对应代码；true则替换为占位符，跳到二级页面展示

我们拿到demo的value值，从config.dart中得到对应的demo实例，也就是自己组件的widget，而正常的文档通过第三方库flutter_markdown转换成对应的flutter原生widget。于是整个markdown文档就全部转换成了多个widget组合的列表，然后放到ListView中进行显示。

那我们是怎么样把渲染组件的代码嵌入到markdown中的呢？
再来看下我们嵌入的代码：

{{"demo": "lib/demo/horizonal_scroll/HorizontalScrollDefault.dart", "code": true}}

这样，我们就只需要修改代码，效果和对应的代码都会同步展示出来。

另外，如果展示的效果是全屏的，只需要加个"jump":true的参数，特殊代码就会解析成一个占位符，点击跳转到二级页面展示效果，点击右上角菜单即可查看对应的代码。

代码关键字高亮展示，方便阅读，支持代码折叠、复制功能。

2、快速接入组件

既然是组件库，就支持不断的往库中新增组件，为了让开发者接入组件的时候更加简单方便，我们提供了接入脚本，脚本会根据输入的组件信息，会自动在example/lib/demo文件创建一个组件模版，接入方只需要修改自己组件相关的信息，就能在界面中进行显示。

• 具体设计

参数详解：

.md文件：组件详细描述markdown文件，其中可插入组件效果的特定代码块，需开发者自行编辑
.dart文件：对应组件的效果实现文件，需提供组件的开发者自行实现相应效果
.page.json：根据执行脚本自动生成的组件信息文件，供ListData读取显示在列表页中，不需要开发者操作

脚本主要做了两件个事情：

1. 在example/lib/demo中生成对应组件的文件夹
   

2. 自动在ListDatas中加入需要在list中显示的组件
   

然后在assets中配置自己的文件夹路径

- lib/demo/test_wdiget/

并且需要在util/config.dart中配置自己的demo数据

'lib/demo/test_widget/test_widget': () => TestWidget(),

至此就完成了一个简单的接入工作，运行工程，会在列表页看见加入的demo。

现有组件list

我们从安居客有料中提取了多个高阶组件，下面我们来介绍下这些组件。

1. video：视频Feed流滚动探测播放插件

我们经常会遇到这样的需求，当视频滑动到列表的某一个位置时，视频自动播放。甚至列表存在视频和其他帖子参差的数据，这个时候我们就需要去动态的检测可视范围内符合条件的视频数据，该组件就是在feed流中探测视频控件进行操作的插件。

使用方式：

  1.1 使用ScrollDetectListener包裹ListView，ListView为业务相关的视频流帖子。

  1.2 视频帖子使用MetaConsumer包裹；

2. pinned_sliver： 混合嵌套列列表中的吸顶安全区解决⽅方案

在Flutter中使用AppBarLayout和SliverPersistentHeader都可以做出基本的吸顶效果。AppBarLayout内部使用的也是SliverPersistentHeader，可以把它理解为一个Framework定制好的状态栏控件，支持较多设置属性，包括吸顶和float等。

当吸顶遇到刘海屏时，事情就会变得有些复杂，一般来说我们希望：

  2.1 在没有吸顶前，尽可能多的利用屏幕，也就是需要使用沉浸式；

  2.2 当吸顶的时，吸顶块需要在刘海之下，也就是空出安全区；

而flutter本身的组件是不支持吸顶前后UI样式不一样的情况，该组件就是为了解决这种情况诞生的。

3. bannder_round： 一个支持多种形式的高性能轮播组件

滚播组件算是在日常开发中很常见的一种组件了，该组件支持默认滚播图片和自定义滚播item样式，可设置定时滚动等功能。

4. horizonal_scroll： 带尾部加载更多样式的横滑scrollview

在日常开发中，经常会遇到右滑加载更多的需求，但是flutter提供的Scrollview是不提供底部加载更多效果的。为了减少开发时间，提供了一个带阻尼回弹效果的横向加载更多组件，底部加载更多可用自定义组件，也可用组件内提供的默认样式和显示文字的样式。

5. draggable_btn： 一个跟随手指全屏拖动的按钮

DraggableBtn是一个跟随手指全屏拖动的组件，当手指按住时放大，随着手指移动，放开恢复原来大小，停留在手指弹起的位置。

可适用于悬浮广告位和debug时调试的悬浮按钮。

6. popup_window： 一个任意位置，箭头跟踪View的弹层效果组件，可指定上下左右方向，弹出对应方向的弹层，一般适用于弹出。

后期规划

希望更多开发者能积极的参与到我们的组件库中，我们会不断丰富我们的内容，使magpie_fly成为日常开发中必不可少的工具之一。

作者介绍

吴丹，58同城二手车技术部-iOS高级开发工程师，主要负责58同城App的二手车相关研发工作。

金修博，58同城商业智能中心-iOS高级开发工程师，主要负责美事App的相关研发工作。

李义新，58安居客二手房经纪人Android高级开发工程师，主要负责移动经纪人App的相关研发工作。

Live

58对外技术沙龙第五期

Flutter专场——Flutter在58的应用实践系列话题

系列2已准备就绪

本周日晚7:00准时开幕

扫码添加“58技术小秘书”微信 : jishu-58
添加小秘书微信后由小秘书拉您进项目交流群

END

阅读推荐